<template>
  <div class="job">
    <div class="search">
      <a-input-group compact>
      <a-input-search
        v-model="search_value.q"
        placeholder="通过职位或公司搜索"
        enter-button
        default-value=''
        style="width: 790px"
        @search="searchJobList"
      />
      </a-input-group>
      <div class="filter">
        所在城市：
        <a-select
        ref="select"
        style="width: 120px"
        default-value=''
        @change="changeCity"
      >
        <a-select-option value="">不限</a-select-option>
        <a-select-option v-for="(p,i) of cityList" :key=i :value="p">{{p}}</a-select-option>
      </a-select>
      公司类型：
      <a-select
        ref="select"
        style="width: 120px"
        @change="changeType"
        default-value=''
      >
        <a-select-option value="">不限</a-select-option>
        <a-select-option v-for="(p,i) of COMPTYPE" :key=i :value="p.value">{{p.label}}</a-select-option>
      </a-select>
      薪资区间：
      <a-select
        ref="select"
        style="width: 120px"
        @change="changeWage"
        default-value=''
      >
        <a-select-option value="">不限</a-select-option>
        <a-select-option value="3k-">3k以内</a-select-option>
        <a-select-option value="3-5k">3-5k</a-select-option>
        <a-select-option value="5-10k">5-10k</a-select-option>
        <a-select-option value="10-15k">10-15k</a-select-option>
        <a-select-option value="15-20k">15-20k</a-select-option>
        <a-select-option value="20k+">20k+</a-select-option>
      </a-select>
      公司规模：
       <a-select
        ref="select"
        style="width: 120px"
        default-value=''
        @change="changePeople"
      >
        <a-select-option value="">不限</a-select-option>
        <a-select-option v-for="(item,k) of COMPPEOPLE" :key=k :value="item.value">{{item.label}}</a-select-option>
      </a-select>
      </div>
    </div>
    <div class="list">
      <div class="jobCard" v-for="(p,i) of jobs" :key="i">
        <div class="content" @click="toDetail(p.jobId, $event)">
          <div class="job_header">
            <h3>{{p.jobName}}</h3>
            <span>{{(p.minWage/1000).toFixed(1)}}k-{{(p.maxWage/1000).toFixed(1)}}k</span>
            <div>
              <span>{{p.jobCity}} &nbsp;&nbsp;</span>| &nbsp;&nbsp;
            <span>需要：{{p.jobNum}} 人</span>
            <div class="publisher">{{p.username}} | {{p.position}}</div>
            </div>
          </div>
          <div class="CompCard">
            <div class="left">
              <h3>{{p.compName}}</h3>
              <div class="footer">
                <div>{{COMPPEOPLEMAP[p.compPeople]}}</div>&nbsp;&nbsp;|&nbsp;&nbsp;
                <div>{{COMPTYPEMAP[p.compType]}}</div>
              </div>
            </div>
            <div class="img">
              <img :src="p.logo" alt=""/>
            </div>
          </div>
        </div>
        <div class="tag">
          <div v-for="(item, k) of p.tag.split(',')" :key=k >{{item}}</div>
        </div>
      </div>
       <a-pagination v-model="current" :total="total" :pageSize="pageSize" show-less-items @change="onChange" />
    </div>
  </div>
</template>
<script>
import './styles.less'
import jobAPI from '../../services/job'
import { requestWrapper } from '../../utils/request'
import {COMPTYPEMAP, COMPPEOPLEMAP, COMPTYPE, COMPPEOPLE} from '../../const/const'
export default {
  data() {
    return {
      COMPTYPEMAP: COMPTYPEMAP,
      COMPPEOPLEMAP: COMPPEOPLEMAP,
      COMPTYPE: COMPTYPE,
      COMPPEOPLE: COMPPEOPLE,
      search_value: {
        q: '',
        city: '',
        compType: '',
        wageSection: '',
        people: '',
      },
      cityList: [],
      jobs: [],
      current: 1,
      total: 1,
      pageSize: 8,
    };
  },
  methods: {
    searchJobList(q, params){
      requestWrapper( jobAPI.jobs.bind(null,  {...this.search_value, ...params}), {
        formatDataFn: res => res.result,
      }).then((res) => {
        this.jobs = res.JobList
        this.current = res.Page
        this.total = res.Total
        this.pageSize = res.PageSize
      })
    },
    toDetail(id, e) {
      const detail = this.$router.resolve({
        path: '/job_detail',
        query: {
          jobId: id
        }
      })
      window.open(detail.href,'_blank')
    },
    changeCity(v) {
      this.search_value.city = v;
      this.searchJobList(this.search_value)
    },
    changeType(v) {
      this.search_value.compType = v;
      this.searchJobList(this.search_value)
    },
    changeWage(v) {
       this.search_value.wageSection = v;
       this.searchJobList(this.search_value)
    },
    changePeople(v) {
      this.search_value.compPeople = v;
      this.searchJobList(this.search_value)
    },
    onChange(current) {
      this.current = current;
      this.searchJobList(this.search_value, {pageSize: 8, page: current});
    },
  },
  mounted() {
    this.search_value.q = this.$route.query.search_value;
    this.searchJobList(this.search_value)
    requestWrapper( jobAPI.jobCity.bind(null, {}), {
        formatDataFn: res => res,
      }).then((res) => {
        this.cityList = res.result
      })
  }
}
</script>
